<template>
    <div class="bigbox">
    <main>
            <div class="box">
                <div class="samll">
                    <p>乡村基(天府新谷店)</p>
                    <van-rate
                        v-model="value"
                        :size="25"
                        color="#ffd21e"
                        void-icon="star"
                        void-color="#eee"
                        />
                        <span>(661)</span>
                        <span>月售1000单</span>
                </div>
                <div>
                    <van-rate v-model="HeartValue" icon="like" void-icon="like-o" :count="1"/>
                    <p>已收藏</p>
                </div>

            </div>
            <div class="middle">
                <div>
                    <p>起送价</p>
                    <span>20</span><span>元</span> 
                </div>
                <div>
                    <p>商家配送</p>
                    <span>8</span><span>元</span> 
                </div>
                <div>
                    <p>平均配送时间</p>
                    <span>20</span><span>分钟</span> 
                </div>
            </div>
    </main>
    <footer>
        <div>
            <p>活动与公告</p>
            <span>一二三四五六七八九十JQKA大笨象会跳舞。小猴子会安抚念白搜房哈施工以我哈弗爱1暗黑风biu部分哈嘎v发发发按客户三大赛是撒大声点哈哈的骄傲的尽快哈哈健康的哈酒的哈</span>
        </div>
        <div>
            <p>线上精彩活动</p>
            <p>VC无限橙果汁全场8折</p>
        </div>

    </footer>

    </div>
</template>

<script lang="ts">
// import {shopData} from "../../api/shopApi"
export default {
    data() {
        return {
            value: 0,
            HeartValue:0
        }
    },
    // async created() {
    //     let res = await shopData()
    //     console.log(res);
        
    // }
}
</script>

<style scoped>
    .bigbox{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    main{
        background: #fff;
        flex: 1;
    }
    .box{
        background: #fff;
        display: flex;
        margin: 0 15px;
        justify-content: space-between;  
        border-bottom: 1px solid #c0c0c0;
    }
    .samll{
        margin-top: -19px;
        text-align: left;
    }
    .samll p{
        
        font-weight: 600;
    }
    .middle{
        display: flex;
        justify-content: space-between;
        padding: 0px 30px 20px 30px;
        text-align: center;
    }
    .middle p{
        color: #c9c9c9;
    }
    .middle span:nth-child(2){
        font-size: 20px;
    }
    .middle  span:nth-child(3){
        color: #c9c9c9;
    }
    footer{
        margin-top: 30px;
        background: #fff;
        
        height: 300px;
    }
    footer div:nth-child(1){
        margin: 0 20px;
        padding-bottom: 40px;
        border-bottom: 1px solid #c0c0c0;
    }
    footer div:nth-child(1) p{
        padding-top: 15px;
        text-align: left;
        font-size: 22px;
        font-weight: 600;
    }
    footer div:nth-child(1) span{
        color: #f24f25;
        
    }
    footer div:nth-child(2){
        margin: 0px 20px ;
        
    }
    footer div:nth-child(2) p:nth-child(1)::before{
        content: '减';
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #eb2929;
        color: #fff;
        text-align: center;
        margin-right: 10px;
    }
    footer div:nth-child(2) p:nth-child(2)::before{
        content: '折';
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #0686bf;
        color: #fff;
        text-align: center;
        margin-right: 10px;
    }
</style>